import { useState } from 'react'
import { useRootStore } from '../../store'
function Header () {
  const [title, setTitle = ''] = useState('')
  const { todoStore } = useRootStore()
  const { addTodo } = todoStore
  return (
    <header className='header'>
      <h1>Todos</h1>
      <input
        className='new-todo'
        placeholder='What needs to be done?'
        autoFocus
        value={title}
        onChange={e => setTitle(e.target.value)}
        onKeyUp={e => {
          if (e.key === 'Enter') {
            addTodo(title)
            setTitle('')
          }
        }}
      ></input>
    </header>
  )
}

export default Header
